<template>
  <div :class="name">
    <Tabs class="iview-tab-all">
      <TabPane label="本地数据" icon="ios-download mfff">
        <p class="font-red">加载本地数据必须选择*.shp,*.dbf,*.prj,*.sbn,*.shx,*.sbx文件！</p>
        <div class="iview-cord" >
          <span >请选择本地矢量文件</span>
          <span >
            <Icon type="md-add-circle" ></Icon>
          </span>
        </div>
      </TabPane>
      <TabPane label="远程数据" icon="ios-basketball ffff">
        <h3>&nbsp;&nbsp;&nbsp;&nbsp;远程数据</h3>
        <Tabs class="three-text">
          <TabPane label="REST">
            <div class="flex">
               输入远程数据url
              <Input suffix="ios-search" placeholder="Enter text" style="width: auto" />
            </div>
          </TabPane>
          <TabPane label="WMTS">
            <div class="flex">
              输入远程数据url
              <Input suffix="ios-search" placeholder="Enter text" style="width: auto" />
            </div>
          </TabPane>
          <TabPane label="WMS">
            <div class="flex">
              输入远程数据url
              <Input suffix="ios-search" placeholder="Enter text" style="width: auto" />
            </div>
          </TabPane>
        </Tabs>


      </TabPane>
    </Tabs>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        name: "dataLoader",
        esriMap: {},
        searchIconModal: {}

      }
    },
  }





</script>

<style lang="less" rel="less">
  @name: dataLoader;
  .@{name} {
     .iview-tab-all {
       .ivu-tabs-nav-scroll {
         overflow: hidden;
         white-space: nowrap;
         text-align: center;
         display: flex;
         justify-content: center;
       }
      .ivu-tabs-nav{
        /*display: flex;
        justify-content: space-around;
        width: 100%;*/
        .ivu-icon {
          width: 40px;
          height: 40px;
          /* margin-right: 8px; */
          margin: 0;
          font-size: 40px;

        }
        .ivu-tabs-ink-bar {

          background-color: transparent;
        }

      }
       .font-red{
         color:#ed4014 ;
       }
       .iview-cord{
         display: flex;
         justify-content: space-between;
         font-size: 16px;
         line-height: 30px;
         padding: 10px 0;

         .ivu-icon {
          font-size: 30px;
         }
       }
       .three-text{
        // .ivu-tabs-ink-bar {
           /*background-color: #2d8cf0;*/

        // }
         .flex{
           visibility: visible;
           display: flex;
           justify-content: space-around;
           line-height: 30px;
         }
       }
    }
  }
</style>
